<template>
  <!-- 顶部导航栏 -->
  <NavBar navbarTitle="分类"></NavBar>
  <!-- 底部tab栏 -->
  <TabBar></TabBar>
  <div class="category-page">
    <div class="page-search">
      <SvgIcon name="search" width="0.8em" height="0.8em" color="#44bb94"/>
      <input type="text" placeholder="搜索商品">
    </div>
    <div class="page-content">
      <div class="content-left">
        <ul class="left-ul">
          <li :class="activeIndex === index ? 'active':'' " v-for="item,index in goodsInfo" :key="index" @click="activeIndex = index">{{ item.name }}</li>
        </ul>
      </div>
      <div class="content-right">
        <div class="right-swiper">
          <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
            <van-swipe-item v-for="item,index in bannerList" :key="index">
              <img :src="item.imgUrl" alt="none">
            </van-swipe-item>
          </van-swipe>
        </div>
        <div class="right-goods">
          <template v-if="goodInfo" v-for="item,index in goodInfo.children" :key="index">
            <div class="goods-info">
              <span class="info-left">{{ item.name }}</span>
              <div class="info-right">
                <span>全部</span>
                <SvgIcon name="arrow_right" width="1em" height="1em" color="#44bb94"></SvgIcon>
              </div>
            </div>
            <div class="goods">
              <div class="goods-item" v-for="e,i in item.goods" :key="i">
                <img :src="e.picture" alt="no" @click="findGoodDetail(e.id)">
                <p class="item-info">{{ e.name }}</p>
                <span class="item-price">￥{{ e.price }}</span>
              </div>
            </div>
          </template>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang='ts'>
import NavBar from '@/components/NavBar/NavBar.vue';
import SvgIcon from '@/components/SvgIcon/SvgIcon.vue';
import TabBar from '@/components/TabBar/TabBar.vue';
import { ref, onMounted, computed } from "vue";
//引入Vant4组件
import { Swipe as VanSwipe, SwipeItem as VanSwipeItem } from "vant";
//引入请求函数
import { reqCategoryI } from "@/api/category";
import { reqBannerList } from "@/api/home";
//引入类型约束
import type { reqBannerListResponse } from "@/type/home";
import type { reqCategoryIResponse } from "@/type/category";

//轮播图数据
const bannerList = ref<reqBannerListResponse[]>([]);
//商品分类信息
const goodsInfo = ref<reqCategoryIResponse[]>([]);
//选中商品一级分类
let activeIndex = ref(0);

//vue生命周期
onMounted(() => {
  //获取分类页轮播图数据
  getBannerList();
  //获取分类页商品分类信息
  getGoodsInfo();
})

//计算属性
let goodInfo = computed<reqCategoryIResponse>(()=>{
  return goodsInfo.value.filter((item,index) => index === activeIndex.value)[0];
})

//点击商品图片跳转到详情页
const findGoodDetail = (goodId:string) => {
  console.log('商品id=',goodId);
}

//获取轮播图数据
const getBannerList = async () => {
  let res = await reqBannerList(2);
  bannerList.value = res.result;
  console.log("轮播图数据api",res);
}
//获取商品分类数据信息
const getGoodsInfo = async () => {
  let res = await reqCategoryI();
  goodsInfo.value = res.result;
  console.log("商品分类信息api",res);
}
</script>

<style scoped lang='less'>
.category-page{
  position: relative;
  top:47px;

  //顶部搜索区域
  .page-search{
    width:345px;
    height:32px;
    margin: 0 15px;
    padding:0 10px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    background-color: #eff2f5;

    input{
      width: 280px;
      height: 24px;
      margin-left: 8px;
      border: none;
      outline: none;
      background-color: #eff2f5;
      color: #44bb94;
      font-size: 16px;

      &::placeholder{
        font-size: 14px;
        color:#44bb94;
      }
    }
  }
  //主体内容区
  .page-content{
    width: 375px;
    height: 520px;
    margin-top:8px;
    padding-right:10px;
    position: relative;
    display: flex;

    .content-left{
      width:100px;
      height: 520px;
      margin-right: 15px;
      background-color: #eff2f5;

      .left-ul{
        width: 100px;
        height: 520px;
        list-style: none;
        overflow: scroll;
        font-size: 14px;
        color: #44bb94;

        li{
          width: 100px;
          height: 50px;
          text-align: center;
          line-height: 50px;
          border-left:5px solid transparent;
          
          &.active{
            border-left:5px solid #44bb94;
            background-color: #fff;
          }
        }
      }      
    }
    .content-right{
      width: 260px;
      height:520px;
      overflow: scroll;

      //轮播图区域
      .right-swiper{
        width: 250px;
        height: 100px;

        .my-swipe .van-swipe-item {
          width:250px;
          height: 100px;

          img{
            width: 250px;
            height: 100px;;
          }
        }
      }
      .right-goods{
        margin-top: 15px;
        .goods-info{
          display: flex;
          align-items: center;
          justify-content:space-between;

          .info-left{
            font-size: 16px;
            color:#000;
          }
          .info-right{
            display: flex;
            font-size: 12px;
            color: #44bb94;
          }
        }
        .goods{
          display: flex;
          flex-wrap: wrap;
          justify-content:flex-start;
          margin-top: 15px;
          margin-bottom: 30px;

          .goods-item{
            width: 75px;
            height: 140px;
            position: relative;
            margin-right: 8px;
            margin-bottom: 10px;
            display: flex;
            flex-direction: column;

            img{
              width: 75px;
              height: 75px;
            }
            p{
              font-size: 12px;
              color: #404040;
              // display: inline-block;
              // height: 2em;
              // line-height: 1em;
              // text-overflow: ellipsis;
              // white-space: nowrap;
              // overflow: hidden;
              display: -webkit-box;
              -webkit-box-orient:vertical;
              -webkit-line-clamp:2;
              overflow: hidden;
              margin: 6px 0;
            }
            span{
              font-size: 12px;
              color: #f00;
              position: absolute;
              bottom: 10px;
            }
          }
        }
      }
    }
  }
}

</style>